<!DOCTYPE HTML>
<!--
 Strata by HTML5 UP
 html5up.net | @ajlkn
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
	<title>双氧喵</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">

<!-- Header -->
<header id="header">
	<div class="inner">
		<a href="https://hpcat-sym.gitee.io/hpcat" class="image avatar"><img src="http://p1.music.126.net/HX8JPk3B1hivTbYnfXeaAw==/109951168701520857.jpg?param=300y300" alt="" /></a>
		<h1><strong>ฅ这里双氧喵～</strong><br>ฅ一只08年的专职摸鱼的蓝孩纸喵~
			<br>ฅ可以叫我喵喵或者双氧~</h1>
	</div>
</header>

<!-- Main -->
<div id="main">

	<!-- One -->
	<section id="one">
		<header class="major">
			<h2>我用音乐谱写发自内心情感，<br />
				让代表灵魂旋律被更多人听到。</h2>
		</header>
		<p>代表作：ฅ'ω'ฅ♪、Fruity Space (VIP Mix)、寻、結び、the 77th、请签收来自明天的微笑 等
		<br>主要擅长 作曲、编曲
		<br>主要风格 Kawaii Bass、钢琴曲 等
		<br>你可以在网易云音乐、QQ音乐等平台找到我的身影欸</p>
		<ul class="actions">
			<li><a target="_blank" href="https://music.163.com/#/artist?id=35193141" class="button small">\网易云/</a></li>
			<li><a target="_blank" href="https://y.qq.com/n/ryqq/singer/003YwUZA2KqCuB" class="button small">\QQ音乐/</a></li>
		</ul>
	</section>

	<!-- Two -->
	<section id="two">
		<h2>这里是我的一些作品。</h2>
		<div class="row">
			<article class="col-6 col-12-xsmall work-item">
				<a href="http://p1.mus2ic.126.net/aEAt5gzyPhEUO840AHn0Bg==/109951168446505852.jpg?param=800y800" class="image fit thumb"><img src="http://p1.music.126.net/aEAt5gzyPhEUO840AHn0Bg==/109951168446505852.jpg?param=800y800" alt="" /></a>
				<h3>ฅ'ω'ฅ♪</h3>
				<p>专辑内歌曲 - 2022年1月31日发布 2首歌曲</p>
			</article>
			<article class="col-6 col-12-xsmall work-item">
				<a href="http://p2.music.126.net/tp4r1HwQMEVL_dS4UthlBQ==/109951168704362273.jpg?param=800y800" class="image fit thumb"><img src="http://p2.music.126.net/tp4r1HwQMEVL_dS4UthlBQ==/109951168704362273.jpg?param=800y800" alt="" /></a>
				<h3>寻 (Piano Ver.)</h3>
				<p>专辑内歌曲 - Bluretime × 影绰时空</p>
			</article>
			<article class="col-6 col-12-xsmall work-item">
				<a href="http://p1.music.126.net/4bn371xhS3FfQiQmx4BAyg==/109951167813010376.jpg?param=800y800" class="image fit thumb"><img src="http://p1.music.126.net/4bn371xhS3FfQiQmx4BAyg==/109951167813010376.jpg?param=800y800" alt="" /></a>
				<h3>結び</h3>
				<p>单曲 - 2022年8月24日发布 With ΛS7ΔRZ</p>
			</article>
			<article class="col-6 col-12-xsmall work-item">
				<a href="http://p2.music.126.net/r95tWyt1X9gts8ecqJH8Vw==/109951168201186274.jpg?param=800y800" class="image fit thumb"><img src="http://p2.music.126.net/r95tWyt1X9gts8ecqJH8Vw==/109951168201186274.jpg?param=800y800" alt="" /></a>
				<h3>请签收来自明天的微笑</h3>
				<p>专辑内歌曲 - 心有乐章 2023年2月5日发布</p>
			</article>
			<!--<article class="col-6 col-12-xsmall work-item">
             <a href="images/fulls/05.jpg" class="image fit thumb"><img src="images/thumbs/05.jpg" alt="" /></a>
             <h3>Nunc enim commodo aliquet</h3>
             <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
             </article>
             <article class="col-6 col-12-xsmall work-item">
             <a href="images/fulls/06.jpg" class="image fit thumb"><img src="images/thumbs/06.jpg" alt="" /></a>
             <h3>Risus ornare lacinia</h3>
             <p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
             </article>-->
		</div>
		<o>还有更多歌曲在这里诶。</o>
		<ul class="actions">
			<li><a target="_blank" href="https://music.163.com/#/artist?id=35193141" class="button small">\网易云/</a></li>
			<li><a target="_blank" href="https://y.qq.com/n/ryqq/singer/003YwUZA2KqCuB" class="button small">\QQ音乐/</a></li>
		</ul>
	</section>
	<section>
		<header class="major">
			<h2>我用代码编写设想中的一切，<br />
				让想传递的信息向更多人广播。</h2>
		</header>
		<p>我对编写网页一知半解。熟悉比较基本的一些网页知识，没有太强的自主开发和前端能力，但能够通过修改已有模版达成心中的设想目标。
			<br>我也为参与社团/厂牌等团体编写网页，用更漂亮而有效率的方式展示信息。
			<br>如果你也想拥有自己的网页，可以来找我。这个很费时间的，所以可以先把你想上传的一些内容先写好嘛。</p>
		<h2>这里是我的一些网页。</h2>
		<ul class="actions">
			<li><a target="_blank" href="https://hpcat-sym.gitee.io/hl" class="button small">\跃动记录/</a></li>
			<li><a target="_blank" href="https://hpcat-sym.gitee.io/nts" class="button small">\自然构造/</a></li>
		</ul>
	</section>
	<section>
		<header class="major">
			<h2>我用文字书写那些悲欢离合，<br />
				让不一样的世界向更多人显现。</h2>
		</header>
		<p>文案写手。虽然写的不是太出色，但是还是有一定的写作能力。
			<br>主要为歌曲、专辑、特别企划等形式的详情编写故事性、简介性、解释性文案。</p>
	</section>
	<!-- Two -->
	<!-- Three -->
	<section id="three">
		<h2>该怎么与我联系呢？</h2>
		<div class="row">
			<img src="1.JPG" class="col-4"/>
			<img src="2.JPG" class="col-4"/>
			<img src="3.JPG" class="col-4 large"/>
		</div>
	</section>

	<!--
     <section id="four">
     <h2>Elements</h2>

     <section>
     <h4>Text</h4>
     <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
     This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
     This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
     <hr />
     <header>
     <h4>Heading with a Subtitle</h4>
     <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
     </header>
     <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
     <header>
     <h5>Heading with a Subtitle</h5>
     <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
     </header>
     <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
     <hr />
     <h2>Heading Level 2</h2>
     <h3>Heading Level 3</h3>
     <h4>Heading Level 4</h4>
     <h5>Heading Level 5</h5>
     <h6>Heading Level 6</h6>
     <hr />
     <h5>Blockquote</h5>
     <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
     <h5>Preformatted</h5>
     <pre><code>i = 0;

    while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
    }

    print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
     </section>

     <section>
     <h4>Lists</h4>
     <div class="row">
     <div class="col-6 col-12-xsmall">
     <h5>Unordered</h5>
     <ul>
     <li>Dolor pulvinar etiam magna etiam.</li>
     <li>Sagittis adipiscing lorem eleifend.</li>
     <li>Felis enim feugiat dolore viverra.</li>
     </ul>
     <h5>Alternate</h5>
     <ul class="alt">
     <li>Dolor pulvinar etiam magna etiam.</li>
     <li>Sagittis adipiscing lorem eleifend.</li>
     <li>Felis enim feugiat dolore viverra.</li>
     </ul>
     </div>
     <div class="col-6 col-12-xsmall">
     <h5>Ordered</h5>
     <ol>
     <li>Dolor pulvinar etiam magna etiam.</li>
     <li>Etiam vel felis at lorem sed viverra.</li>
     <li>Felis enim feugiat dolore viverra.</li>
     <li>Dolor pulvinar etiam magna etiam.</li>
     <li>Etiam vel felis at lorem sed viverra.</li>
     <li>Felis enim feugiat dolore viverra.</li>
     </ol>
     <h5>Icons</h5>
     <ul class="icons">
     <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
     <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
     <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
     <li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
     <li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
     <li><a href="#" class="icon brands fa-tumblr"><span class="label">Tumblr</span></a></li>
     </ul>
     </div>
     </div>
     <h5>Actions</h5>
     <ul class="actions">
     <li><a href="#" class="button primary">Default</a></li>
     <li><a href="#" class="button">Default</a></li>
     </ul>
     <ul class="actions small">
     <li><a href="#" class="button primary small">Small</a></li>
     <li><a href="#" class="button small">Small</a></li>
     </ul>
     <div class="row">
     <div class="col-6 col-12-small">
     <ul class="actions stacked">
     <li><a href="#" class="button primary">Default</a></li>
     <li><a href="#" class="button">Default</a></li>
     </ul>
     </div>
     <div class="col-6 col-12-small">
     <ul class="actions stacked">
     <li><a href="#" class="button primary small">Small</a></li>
     <li><a href="#" class="button small">Small</a></li>
     </ul>
     </div>
     <div class="col-6 col-12-small">
     <ul class="actions stacked">
     <li><a href="#" class="button primary fit">Default</a></li>
     <li><a href="#" class="button fit">Default</a></li>
     </ul>
     </div>
     <div class="col-6 col-12-small">
     <ul class="actions stacked">
     <li><a href="#" class="button primary small fit">Small</a></li>
     <li><a href="#" class="button small fit">Small</a></li>
     </ul>
     </div>
     </div>
     </section>

     <section>
     <h4>Table</h4>
     <h5>Default</h5>
     <div class="table-wrapper">
     <table>
     <thead>
     <tr>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
     </tr>
     </thead>
     <tbody>
     <tr>
     <td>Item One</td>
     <td>Ante turpis integer aliquet porttitor.</td>
     <td>29.99</td>
     </tr>
     <tr>
     <td>Item Two</td>
     <td>Vis ac commodo adipiscing arcu aliquet.</td>
     <td>19.99</td>
     </tr>
     <tr>
     <td>Item Three</td>
     <td> Morbi faucibus arcu accumsan lorem.</td>
     <td>29.99</td>
     </tr>
     <tr>
     <td>Item Four</td>
     <td>Vitae integer tempus condimentum.</td>
     <td>19.99</td>
     </tr>
     <tr>
     <td>Item Five</td>
     <td>Ante turpis integer aliquet porttitor.</td>
     <td>29.99</td>
     </tr>
     </tbody>
     <tfoot>
     <tr>
     <td colspan="2"></td>
     <td>100.00</td>
     </tr>
     </tfoot>
     </table>
     </div>

     <h5>Alternate</h5>
     <div class="table-wrapper">
     <table class="alt">
     <thead>
     <tr>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
     </tr>
     </thead>
     <tbody>
     <tr>
     <td>Item One</td>
     <td>Ante turpis integer aliquet porttitor.</td>
     <td>29.99</td>
     </tr>
     <tr>
     <td>Item Two</td>
     <td>Vis ac commodo adipiscing arcu aliquet.</td>
     <td>19.99</td>
     </tr>
     <tr>
     <td>Item Three</td>
     <td> Morbi faucibus arcu accumsan lorem.</td>
     <td>29.99</td>
     </tr>
     <tr>
     <td>Item Four</td>
     <td>Vitae integer tempus condimentum.</td>
     <td>19.99</td>
     </tr>
     <tr>
     <td>Item Five</td>
     <td>Ante turpis integer aliquet porttitor.</td>
     <td>29.99</td>
     </tr>
     </tbody>
     <tfoot>
     <tr>
     <td colspan="2"></td>
     <td>100.00</td>
     </tr>
     </tfoot>
     </table>
     </div>
     </section>

     <section>
     <h4>Buttons</h4>
     <ul class="actions">
     <li><a href="#" class="button primary">Primary</a></li>
     <li><a href="#" class="button">Default</a></li>
     </ul>
     <ul class="actions">
     <li><a href="#" class="button large">Large</a></li>
     <li><a href="#" class="button">Default</a></li>
     <li><a href="#" class="button small">Small</a></li>
     </ul>
     <ul class="actions fit">
     <li><a href="#" class="button primary fit">Fit</a></li>
     <li><a href="#" class="button fit">Fit</a></li>
     </ul>
     <ul class="actions fit small">
     <li><a href="#" class="button primary fit small">Fit + Small</a></li>
     <li><a href="#" class="button fit small">Fit + Small</a></li>
     </ul>
     <ul class="actions">
     <li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
     <li><a href="#" class="button icon solid fa-download">Icon</a></li>
     </ul>
     <ul class="actions">
     <li><span class="button primary disabled">Primary</span></li>
     <li><span class="button disabled">Default</span></li>
     </ul>
     </section>

     <section>
     <h4>Form</h4>
     <form method="post" action="#">
     <div class="row gtr-uniform gtr-50">
     <div class="col-6 col-12-xsmall">
     <input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
     </div>
     <div class="col-6 col-12-xsmall">
     <input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
     </div>
     <div class="col-12">
     <select name="demo-category" id="demo-category">
     <option value="">- Category -</option>
     <option value="1">Manufacturing</option>
     <option value="1">Shipping</option>
     <option value="1">Administration</option>
     <option value="1">Human Resources</option>
     </select>
     </div>
     <div class="col-4 col-12-small">
     <input type="radio" id="demo-priority-low" name="demo-priority" checked>
     <label for="demo-priority-low">Low Priority</label>
     </div>
     <div class="col-4 col-12-small">
     <input type="radio" id="demo-priority-normal" name="demo-priority">
     <label for="demo-priority-normal">Normal Priority</label>
     </div>
     <div class="col-4 col-12-small">
     <input type="radio" id="demo-priority-high" name="demo-priority">
     <label for="demo-priority-high">High Priority</label>
     </div>
     <div class="col-6 col-12-small">
     <input type="checkbox" id="demo-copy" name="demo-copy">
     <label for="demo-copy">Email me a copy of this message</label>
     </div>
     <div class="col-6 col-12-small">
     <input type="checkbox" id="demo-human" name="demo-human" checked>
     <label for="demo-human">I am a human and not a robot</label>
     </div>
     <div class="col-12">
     <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
     </div>
     <div class="col-12">
     <ul class="actions">
     <li><input type="submit" value="Send Message" class="primary" /></li>
     <li><input type="reset" value="Reset" /></li>
     </ul>
     </div>
     </div>
     </form>
     </section>

     <section>
     <h4>Image</h4>
     <h5>Fit</h5>
     <div class="box alt">
     <div class="row gtr-50 gtr-uniform">
     <div class="col-12"><span class="image fit"><img src="images/fulls/05.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/01.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/02.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/03.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/04.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/05.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/06.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/03.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/02.jpg" alt="" /></span></div>
     <div class="col-4"><span class="image fit"><img src="images/thumbs/01.jpg" alt="" /></span></div>
     </div>
     </div>
     <h5>Left &amp; Right</h5>
     <p><span class="image left"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
     <p><span class="image right"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
     </section>

     </section>
     -->

</div>

<!-- Footer -->
<footer id="footer">
	<div class="inner">
		<!--<ul class="icons">
         <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
         <li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
         <li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
         <li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
         </ul>-->
		<ul class="copyright">
			<li><a href="#three">联系我</a></li><li>&copy; 双氧喵</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
		</ul>
	</div>
</footer>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

</body>
</html>